<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手机页面</title>
	<meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="./style/reset.css" />
	<link rel="stylesheet" href="./style/style.css" />
	<link rel="stylesheet" href="./style/index.css" />
	<script type="text/javascript">
		(function (doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function () {
		            var clientWidth = docEl.clientWidth;
		            if (!clientWidth) return;
		            if (clientWidth>=750) {
		            	 // docEl.style.fontSize ='100px';
		            }else{
		            	docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		            } 
		        };
		    // Abort if browser does not support addEventListener
		    if (!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
	<script type="text/javascript">


	  function changeImage_home(){
	  	document.getElementById("home").src="./images/home_after.png";
	  }

	  function changeImage_home2(){
	  	document.getElementById("home").src="./images/home_before.png";
	  }


	  	  function changeImage_cut(){
	  	document.getElementById("cut").src="./images/cut_after.png";
	  }

	  function changeImage_cut2(){
	  	document.getElementById("cut").src="./images/cut_before.png";
	  }


    	  function changeImage_discover(){
	  	document.getElementById("discover").src="./images/discover_after.png";
	  }

	  function changeImage_discover2(){
	  	document.getElementById("discover").src="./images/discover_before.png";
	  }


   	  function changeImage_mine(){
	  	document.getElementById("mine").src="./images/mine_after.png";
	  }

	  function changeImage_mine2(){
	  	document.getElementById("mine").src="./images/mine_before.png";
	  }




	</script>
</head>
<body>
	<div class="body">
		<header>
			<img src="./images/logo.png" class="logo" />

			<div class="search">
				<input type="search" value="" placeholder="请输入商品名称" />
			</div>

			<div class="city">
				<ul>
					<li>
						<a href="#">广州市</a>
					</li>
					<li>
						<a href="#">惠州市</a>
					</li>
					<li>
						<a href="#">贵州市</a>
					</li>
					<li>
						<a href="#">东莞市</a>
					</li>

				</ul>
			</div>

			<div class="clearfix"></div>

		</header>

		<div class="banner">
			<img src="./images/banner.png" alt=""></div>

		<section class="discount">
			<ul class="discount-nav">
				<li>
					<img src="./images/banner_03.png" />
				</li>
				<li>优惠团购</li>
				<li>
					<a href="#" class="more">更多</a>
				</li>
			</ul>
			<div class="clearfix"></div>
			<ul class="activity">
				<li>
					<a href="#">
						<img src="./images/pating_img_01.png" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/pating_img_02.png" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/pating_img_03.png" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/pating_img_04.png" />
					</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</section>

		<section class="love">
			<ul class="love-nav">
				<li>
					<img src="./images/heard_03.png" />
				</li>
				<li>猜你喜欢</li>
				<li>
					<a href="#" class="more">更多</a>
				</li>
			</ul>
			<div class="clearfix"></div>
			<ul class="case">
				<li>
					<img src="./images/food_03.png">
					<div class="info">
						<h2>
							<a href="#">万岁寿司（正佳店）</a>
							<span>&lt;100m</span>
						</h2>
						<p>[100店通用]双人套餐</p>
						<p>
							￥88.00
							<span>已售1000</span>
						</p>
					</div>
					<div class="clearfix"></div>
				</li>
				<li>
					<img src="./images/food_06.png">
					<div class="info">
						<h2>
							<a href="#">周黑鸭（正佳店）</a>
							<span>&lt;100m</span>
						</h2>
						<p>[100店通用]双人套餐</p>
						<p>
							￥88.00
							<span>已售1000</span>
						</p>
					</div>
					<div class="clearfix"></div>
				</li>

			</ul>
		</section>

		<footer>
			<nav>
				<a href="#">
					<img id="home" onmouseover="changeImage_home()" onmouseout="changeImage_home2()" src="./images/home_before.png" />
					<br />
					首页
				</a>
				<a href="#">
					<img id="cut" onmouseover="changeImage_cut()" onmouseout="changeImage_cut2()" src="./images/cut_before.png" />
					<br />
					分类
				</a>
				<a href="#">
					<img id="discover"  onmouseover="changeImage_discover()" onmouseout="changeImage_discover2()" src="./images/discover_before.png" />
					<br />
					发现
				</a>
				<a href="#">
					<img id="mine" onmouseover="changeImage_mine()" onmouseout="changeImage_mine2()" src="./images/mine_before.png" />
					<br />
					我的
				</a>
			</nav>
		</footer>

	</div>

</body>
</html>